﻿<div [@routerTransition] id="app-contact">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>打印机管理</span>
                </h3>
                <span class="m-section__sub">
                    设置打印机
                </span>
            </div>
            <div class="col text-right mt-3 mt-md-0">
                <button (click)="showDialogToAdd()" class="btn btn-primary"><i class="fa fa-plus"></i> 添加打印机</button>
            </div>
        </div>
    </div>


    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">

            
                <div class="row align-items-center">
                    <!--<Primeng-TurboTable-Start>-->
                    <div class="primeng-datatable-container" >
                        <p-table #dt [columns]="cols" [value]="printers" selectionMode="single"
                            [(selection)]="selectedPrinter" (onRowSelect)="onRowSelect($event)" [paginator]="false">

                            <ng-template pTemplate="header" let-columns>
                                <tr>
                                    <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                                        {{col.header}}
                                        <p-sortIcon [field]="col.field"></p-sortIcon>
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-rowData let-columns="columns" let-record="$implicit">
                                <tr [pSelectableRow]="rowData" class="">
                                    <td *ngFor="let col of columns">
                                        {{rowData[col.field]}}
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>


                        <p-dialog header="打印机信息" [(visible)]="displayDialog" [focusOnShow]="false"
                            [responsive]="true" showEffect="fade" [modal]="true" [style]="{width: '400px'}">
                            <div class="ui-g ui-fluid" *ngIf="selectedPrinter">

                                <div class="ui-g-12">
                                    <div class="form-group">
                                        <label>编号</label>
                                        <input pInputText id="stationName" class="form-control" id="id"
                                            [(ngModel)]="selectedPrinter.id" readonly="true">
                                    </div>
                                </div>
                                <div class="ui-g-12">
                                    <div class="form-group">`
                                        <label>SN</label>
                                        <input pInputText class="form-control ng-pristine ng-valid ng-touched"
                                            id="sn" [(ngModel)]="selectedPrinter.sn" autofocus />
                                    </div>
                                </div>
                                <div class="ui-g-12">
                                    <div class="form-group">
                                        <label>名称</label>
                                        <input pInputText class="form-control ng-pristine ng-valid ng-touched"
                                            id="displayName" [(ngModel)]="selectedPrinter.displayName" />
                                    </div>
                                </div>
                                <div class="ui-g-12">
                                    <div class="form-group">
                                        <label>位置</label>
                                        <input pInputText class="form-control ng-pristine ng-valid ng-touched"
                                            id="location" [(ngModel)]="selectedPrinter.location"  />
                                    </div>
                                </div>
                                <div class="ui-g-12">
                                    <div class="form-group">
                                        <label>所属单位</label>
                                        <select #sourceNameCombobox
                                                name="sourceName"
                                                class="form-control bs-select"
                                                [(ngModel)]="selectedPrinter.companyCode">
                                            <option *ngFor="let companyItem of companyCombobox" [value]="companyItem.value" >{{companyItem.displayText}}</option>
                                        </select> 
                                    </div>
                                </div>
                                <div class="ui-g-12">
                                    <div class="form-group">
                                        <label>备注</label>
                                        <input pInputText class="form-control ng-pristine ng-valid ng-touched"
                                            id="remark" [(ngModel)]="selectedPrinter.remark"  />
                                    </div>
                                </div>
                            </div>
                            <p-footer>
                                <div class="ui-dialog-buttonpane ui-helper-clearfix">
                                    <button type="button" pButton icon="pi pi-times" class="ui-button-danger" (click)="delete()"
                                        label="删除"></button>
                                    <button type="button" pButton icon="pi pi-check" (click)="save()"
                                        label="保存"></button>
                                </div>
                            </p-footer>
                        </p-dialog>
                    </div>
                </div>
            </div>
        </div>
    </div>




</div>